<template>
  <div class="chart-container">
    <vxe-table
      border
      show-footer
      height="520"
      :footer-span-method="footerColspanMethod"
      :footer-method="footerMethod"
      :data="tableData"
    >
      <vxe-column type="seq" width="60"></vxe-column>
      <vxe-column field="name" title="Name" sortable></vxe-column>
      <vxe-column field="role" title="Role" sortable></vxe-column>
      <vxe-column field="rate" title="Rate" footer-align="center"></vxe-column>
      <vxe-column field="age" title="Age" footer-align="center"></vxe-column>
    </vxe-table>
  </div>
</template>

<script>
export default {
  name: "demoTwo",
  filters: {},
  data() {
    return {
      tableData: [
        {
          id: 10001,
          name: "Test1",
          nickname: "T1",
          role: "Develop",
          sex: "Man",
          age: 28,
          address: "vxe-table 从入门到放弃"
        },
        {
          id: 10002,
          name: "Test2",
          nickname: "T2",
          role: "Test",
          sex: "Women",
          age: 22,
          address: "Guangzhou"
        },
        {
          id: 10003,
          name: "Test3",
          nickname: "T3",
          role: "PM",
          sex: "Man",
          age: 32,
          address: "Shanghai"
        },
        {
          id: 10004,
          name: "Test4",
          nickname: "T4",
          role: "Designer",
          sex: "Women",
          age: 23,
          address: "vxe-table 从入门到放弃"
        },
        {
          id: 10005,
          name: "Test5",
          nickname: "T5",
          role: "Develop",
          sex: "Women",
          age: 30,
          address: "Shanghai"
        },
        {
          id: 10006,
          name: "Test6",
          nickname: "T6",
          role: "Designer",
          sex: "Women",
          age: 21,
          address: "vxe-table 从入门到放弃"
        },
        {
          id: 10007,
          name: "Test7",
          nickname: "T7",
          role: "Test",
          sex: "Man",
          age: 29,
          address: "vxe-table 从入门到放弃"
        },
        {
          id: 10008,
          name: "Test8",
          nickname: "T8",
          role: "Develop",
          sex: "Man",
          age: 35,
          address: "vxe-table 从入门到放弃"
        }
      ]
    };
  },
  created() {},
  mounted() {},
  methods: {

    meanNum(list, field) {
      let count = 0;
      list.forEach(item => {
        count += Number(item[field]);
      });
      return count / list.length;
    },

    sumNum(list, field) {
      let count = 0;
      list.forEach(item => {
        count += Number(item[field]);
      });
      return count;
    },

    footerMethod({ columns, data }) {
      const footerData = [

        columns.map((column, _columnIndex) => {
          console.log('/////')
          console.log(column)
          //console.log(_columnIndex)
          console.log('/////')
          if (_columnIndex === 0) {
            return "平均";
          }
          if (["age", "rate"].includes(column.property)) {
            return this.meanNum(data, "age");
          }
          if (["name"].includes(column.property)) {
            return "";
          }
          if (["content"].includes(column.property)) {
            return "合并了";
          }
          return null;
        }),

        columns.map((column, _columnIndex) => {
          if (_columnIndex === 0) {
            return "和值";
          }
          if (["age", "rate"].includes(column.property)) {
            return this.sumNum(data, "age");
          }
          return null;
        })
        
      ];

      return footerData;
    },

    footerColspanMethod({$rowIndex, _columnIndex }) {
      if ($rowIndex === 0) {
        if (_columnIndex === 1) {
          return {
            rowspan: 1,
            colspan: 2
          };
        } else if (_columnIndex === 2) {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
      
    }


  }
};
</script>

<style>
.chart-container {
  position: relative;
  width: 100%;
  height: calc(100vh - 84px);
}
</style>
